<script>
import { ref } from 'vue'
import http from '@/utils/http'

export default {
  data() {
    return {
      externalUrl: 'https://www.qweather.com//weather/yuexiu-101280107.html',
      loading: false,
      error: null,
      city: '',
      weather: null
    }
  },
  methods: {
    search() {
      this.loading = true
      this.error = null
      const now_city = this.city ? this.city : 'me'
      http.get("/weather/" + now_city)
        .then(res => {
          if (res.data.code !== 200) {
            if (res.data.code === 404) {
              this.error = '未查询到该城市的天气信息'
              return
            }else{
              this.error = "位置错误" + res.data.message
              return
            }
            this.error = res.data.message
            return
          }
          this.weather = res.data
          this.successMsg()
        }).finally(() => {
          this.loading = false
        })
    },

    successMsg() {
      ElMessage({
        showClose: true,
        message: '查询成功',
        type: 'success',
      })
    }
  },
  mounted() {
    this.search()
  }
}
</script>


<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="title">
        </div>
      </el-header>
      <el-main>
        <div class="search">
          <el-input v-model="city" placeholder="请输入城市名" style="width: 300px"></el-input>
          <el-button class="search_btn" type="primary" @click="search">查询</el-button>
        </div>
        <div class="detail">
          <div>
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span class="card-title">实时天气</span>
                </div>
              </template>
              <p v-if="loading">加载中...</p>
              <p v-else-if="error">
                <el-empty :description="error ? error : '暂无数据'" />
              </p>
              <p v-else-if="!weather"><el-empty description="description" /></p>
              <div v-else>
                <p class="text item">城市：{{ weather.city }}</p>
                <p class="text item">天气：<i :class="'qi-' + weather.now.icon"></i></p>
                <p class="text item">气温：{{ weather.now.temp }}℃</p>
                <p class="text item">体感温度：{{ weather.now.feelsLike }}℃</p>
                <p class="text item">风向：{{ weather.now.wind360 }}</p>
                <p class="text item">风力等级：{{ weather.now.windScale }}</p>
                <p class="text item">风速：{{ weather.now.windSpeed }}公里/小时</p>
                <p class="text item">湿度：{{ weather.now.humidity }}%</p>
                <p class="text item">更新时间：{{ weather.updateTime }}</p>
                <p class="text item">观测时间：{{ weather.now.obsTime }}</p>
              </div>
            </el-card>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.title {
  margin-top: 2%;
}

.search {
  margin: 2% auto;
  width: 60%;

  .search_btn {
    margin-left: 10px;
    padding: 0 20px;
  }
}

.detail {
  border-radius: 5px;
  margin-top: 2%;
  padding: 10px;
  width: 60%;
  margin: 2% auto;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}
</style>
